<template>
  <div class="table-name-wrapper" :style="getCurrentTextAlign">
    <template v-if="column.prop === 'managerNameField'">
      <ManagerName
        :row="row"
        :column="column"
        :managerNameField="managerNameField"
        :managerCodeField="managerCodeField"
      />
    </template>
    <span
      v-else
      class="label"
      @click="openToDetails()"
      :title="row[column.prop]"
      >{{ row[column.prop] }}</span
    >
  </div>
</template>

<script>
export default {
  name: 'TableRowHrefText',
  components: {
    ManagerName: () => import('./ManagerName')
  },
  props: {
    row: {
      type: Object,
      required: true
    },
    column: {
      type: Object,
      required: true
    },
    // 跳转基金详情类型：PUBLIC - 公募; PRIVATE - 私募; ETF - 指数
    fundDetailType: {
      type: String
    },
    // 【基金经理名字】字段
    managerNameField: {
      type: String
    },
    // 【基金经理 Code】字段
    managerCodeField: {
      type: String
    }
  },
  computed: {
    getCurrentTextAlign() {
      let align = this.column.align ? this.column.align : ''
      let str = `text-align:${align};`
      return str
    }
  },
  methods: {
    // 跳转逻辑处理
    openToDetails() {
      switch (this.fundDetailType) {
        case 'PUBLIC':
          this.pageToPublicFundDetails()
          break
        case 'PRIVATE':
          this.pageToPrivateFundDetails()
          break
        case 'ETF':
          this.pageToETFFundDetails()
          break
        default:
          break
      }
    },
    // 跳转逻辑参考: src\manage\views\FundResearch\LabelManager\LabelView\index.vue
    // 跳转至公募基金详情
    pageToPublicFundDetails() {
      const { fundCode, compref } = this.row
      let { href } = this.$router.resolve({
        path: 'manage/FundDetailsIndex',
        query: {
          fundCode,
          compref: compref || '000300'
        }
      })
      
      this.$utils.openBlank(href, this)
    },
    // 跳转逻辑参考: src\manage\views\FundResearch\LabelManager\LabelView\index.vue
    // 跳转至公募基金详情（ETF）
    pageToETFFundDetails() {
      const { fund_code, index_code } = this.row
      let { href } = this.$router.resolve({
        path: 'manage/FundDetailsIndex',
        query: {
          fundCode: fund_code.split('.')[0],
          compref: index_code || '000300'
        }
      })
      this.$utils.openBlank(href, this)
    },
    // 跳转至私募基金详情
    pageToPrivateFundDetails() {
      const { innerCode, fundCode, fundCompref, compref, concernId } = this.row
      let { href } = this.$router.resolve({
        path: 'manage/PEFundDetail',
        query: {
          fundCode: innerCode || fundCode,
          compref: fundCompref || compref || '000300',
          concernId
        }
      })
      this.$utils.openBlank(href, this)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/styles/themeStyle.less';

.table-name-wrapper {
  width: 100%;
  display: flex;
  align-items: center;

  .label {
    font-size: 14px;
    color: @primaryTableHerfTextColor;
    width: 100%;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-align: cneter;
  }
}
</style>
